<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>图书</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="../css/menu.css">
	<link rel="stylesheet" href="../css/jquery.range.css">
	<link rel="stylesheet" href="../css/sm.min.css">
	<link rel="stylesheet" href="../css/sm-extend.min.css">
	<script type="text/javascript" src="../common/common.js"></script>
	<!-- <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/page.js"></script> -->
	<!-- <script type="text/javascript" src="../js/page_test.js"></script> --> <!-- 测试用 -->
	<script type="text/javascript" src="../js/newpage_page.js"></script>  <!-- 最终生产版本的js文件 -->
	<script type="text/javascript" src="../js/audioPlayer.js"></script>
	<script type="text/javascript" src="../js/modernizr.2.5.3.min.js"></script>
	
	<style type="text/css">
	/*css 的样式都放在这里*/
	#body{
		width: 100%;
		height:100%;
		position: absolute;
		background-color:rgba(1, 1, 1, 0);
        overflow:hidden;
        overflow-y:hidden;
	}
	.content{
		position: absolute;
		width: 100%;
		height:100%;
		background-color:rgba(1, 1, 1, 0);
        overflow:hidden;
        overflow-y:hidden;
	}
	#li_menu4{
		background-image: url('../img/icon_menu1_on.png');
	}

	#li_menu5{
		background-image: url('../img/icon_menu2_off.png');
	}

	#li_menu6{
		background-image: url('../img/icon_menu3_off.png');
	}

	#li_menu7{
		background-image: url('../img/icon_menu4_off.png');
	}
	#li_menu8{
		background-image: url('../img/icon_menu5_off.png');   
	}
	#li_menu9{
		background-image: url('../img/icon_menu6_off.png');   
	}

	.bottom_menu_div{
		z-index: 1200;
		width:100%;
		height:10%;
		position: fixed;
		background-color: #FFCC33;
		top:90%;
		left: 0px;
		right:0px;

	}

	.bottom_menu_img{

	}
	#bottom_menu_img1{
		margin-left:7%;
		width: 9%;
		height:9%;
	}

	#bottom_menu_img2{
		margin-left: 15%;
		width: 10%;
		height:10%;
	}

	#bottom_menu_img4{
		margin-left: 15%;
		width: 10%;
		height:10%;
	}


#bottom_menu_img3{
		margin-left: 15%;
		width: 10%;
		height:10%;
	}


	#div_tips{
		margin-right: 20%;
		margin-left: 20%;
		margin-top: 5%;
		padding: 5px;
		left:0;
		right:0;
		background-color: #0099FF;
		border-radius: 5px;
		text-align: center;
		color:white;
		position: absolute;
	}
	
	#page_container{
		height:90%;
		width: 100%;
		position: absolute;

	}
	#div_container{
		width:100%;
	}
	.flipbook img{
		display: block;
		width: 100%;
		height:100%;
	}
	#div_words_dialog{
		background-color: white;
		padding: 10px;
		padding-top: 5px;
		padding-bottom: 15px;
		width:100%;
		height:45%;
		position: absolute;
		overflow:scroll;
	}

	#img_close{
		width:12%;
		margin-left:85%;
	}
	#div_words_bg{
		background-color:rgba(0, 0, 0, .50);
		color: #FFFFFF;  
		width:100%;
		height:100%;
		position: absolute;
	}

#div_right{
		margin-left: 30%;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
		width: 70%;
		height: 100%;
		background-color: #FFCC33;
		position: fixed;

	}
	#div_right_top{
		color:white;
		text-align: center;
		height:10%;
		display: flex;
	}

	#right_content{
		overflow:scroll;
		height: 80%;
		margin-top: 0;
	}

	#div_right_bottom{
		border-top:white solid 1px;
		color:white;
		text-align: center;
		height:10%;
		display: flex;
	}

	#div_content_bg{
		width:100%;
		height:90%;
		position: absolute;
	}
	#div_chang_sudu{
		position: absolute;
		width: 80%;
		height:50px;
		background-color:rgba(255, 255, 255, .90);
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 10%;
		padding-bottom: 5px;
		padding-top: 10px;
		margin-right: 10%;
		z-index: 2500;
		margin-top: 50%;
	}
	#sound_set_div{
		text-align: center;
		top: 32%;
		left: 41%;
		width: 18%;
		height:25%;
	}
	#sound_set_div_progress{
		width: 100%;
		height:0%;
	}
	#img_showchecked{
		width: 10%;
		top:83%;
		background-color:rgba(75, 155, 200, .50);
		left:87%;
		border-radius:20px;
	}

</style>


</head>
<body>
	<div id = "body">

		

		<div class="page-group">
			<div class="page page-current">  
				<div class="content" >

					<div id="div_chang_sudu" hidden>
							<input type="hidden" class="single-slider" value="6" />
						</div>

					<div id="div_tips" style="z-index: 999;" hidden></div>


					<div id="div_right" style="z-index: 2999;" hidden>
						
						<div id="div_right_top">
							<h2 style="margin: auto;">目录</h2>
						</div>

						<div id="right_content">

							<div class="list-block" style="margin-top:0;margin-bottom: 0;background-color: white" id="right_menu_content">
							    <ul>
							      
							      <!-- <li class="item-content">
							        <div class="item-inner">
							          <div class="item-title">商品名称</div>
							          <div class="item-after">杜蕾佛挡杀佛d斯</div>
							        </div>
							      </li> -->

							    </ul>
							  </div>

						</div>

						<div id="div_right_bottom" onclick="dismissRightMenu()">
							<h3 style="margin:auto;">关闭</h3>
						</div>

					</div>


					<div id="div_words_dialog" style="z-index: 1999;" hidden>
						<img id="img_close" src="../img/img_close.png" onclick="closeDialog()">
						<p style="color:#0099FF;text-align: center;margin-top: -10%">长按文字选择想要查词的内容</p>
						<br/>
						<div id="div_words_dialog_content"></div>
					</div>


					<div id="sound_set_div" style=" border-radius:7px;z-index: 2200; background-color:#ddd; position:absolute;" hidden>
					    <div id="sound_set_div_progress" style="border-radius:5px; background-color:skyblue; position:absolute; left:0; bottom:0;">
					    	<font id="v_progress" size="2" color="white">0%</font>
					    </div>
					</div>

					<img  id="img_showchecked" src="../img/img_hand_uncheck.png" onclick="showChecked()" style="position: absolute;z-index: 2100"/>

					<!-- 用来禁用 content点击用的 -->
					<div id="div_content_bg"  style="z-index: 3000;" onclick="click_fududiv_bg()" hidden></div>


					<div id="div_words_bg"  style="z-index: 1990;" onclick="bg_click()" hidden></div>

		<div style="position: relative;" id="page_container">
						<div class="flipbook-viewport" style="display:none;">
						    
						    <div class="container" style="height:100%;width:100%;background-color: white;margin: 0;padding:0">
						        <div class="flipbook">
						        </div>
						    </div>
						</div>
						<!-- <div class="swiper-container" style="height:100%;width:100%;background-color: white;margin: 0;padding:0">
							<div class="swiper-wrapper" style="width:100%;margin:0; padding:0;">

							</div>
						</div> -->


						<div id="div_container" style="margin-top:0px;height:100%;"></div>

						<audio id="music_player">
							<source src="" >
							</audio>



		<div class="am-share" style="z-index: 1995;">

			<ul class="am-share-sns">

               <li><a href="#"> <i class="share-icon-weibo"   id="li_menu4" onclick="menu1()"></i> <span>单句</span> </a> </li>
               <li><a href="#"> <i class="share-icon-weibo"  id="li_menu5"  onclick="menu2()"></i> <span>本课</span> </a> </li>
               <li><a href="#"> <i class="share-icon-weibo"  id="li_menu6"  onclick="menu3()"></i> <span>复读</span> </a> </li>
               <li><a href="#"> <i class="share-icon-weibo"  id="li_menu7"  onclick="menu4()"></i> <span>连读</span> </a> </li>
               <li><a href="#"> <i class="share-icon-weibo"  id="li_menu9"  onclick="menu6()"></i> <span>变速</span> </a> </li>
               <li><a href="#"> <i class="share-icon-weibo"  id="li_menu8"  onclick="menu5()"></i> <span>查词</span> </a> </li>

           </ul>
       </div>

       <div class="bottom_menu_div">
       	<p>
       		<img src="../img/icon_menu.png" class="bottom_menu_img" id="bottom_menu_img1" onclick="showmenu()">
       		<img src="../img/icon_play.png" class="bottom_menu_img" id="bottom_menu_img2" onclick="readstate()">

       	<img src="../img/img_icon_replay_off.png" class="bottom_menu_img" id="bottom_menu_img4" onclick="follow()">

       	<img src="../img/img_translation_off.png" class="bottom_menu_img" id="bottom_menu_img3" onclick="translation_change()">
       	</p>

       </div>

   </div>

</div>





</div>
</div>
</div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<!-- ================================安卓引用远程（安卓会缓存本地） -->
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<script src="../js/turn.js"></script>
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/jquery.range.js"></script>




<!-- ==================================ios引用本地 -->
<!-- <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='../zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../js/sm.min.js' charset='utf-8'></script>
<script src="../js/turn.js"></script>
<script src="../js/jquery.range.js"></script> -->





<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”


// function follow(){
// 	alert("fds");
// }

//自定义仿iphone弹出层
(function ($) {
    //ios confirm box
    jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
    	var defaults = {
            title: null, //what text
            cancelText: '取消', //the cancel btn text
            okText: '确定' //the ok btn text
        };

        if (undefined === option) {
        	option = {};
        }
        if ('function' != typeof okCall) {
        	okCall = $.noop;
        }
        if ('function' != typeof cancelCall) {
        	cancelCall = $.noop;
        }

        var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

        var $dom = $(this);

        var dom = $('<div class="g-plugin-confirm">');
        var dom1 = $('<div>').appendTo(dom);
        var dom_content = $('<div>').html(o.title).appendTo(dom1);
        var dom_btn = $('<div>').appendTo(dom1);
        var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
        var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
        btn_cancel.on('click', function (e) {
        	o.cancelCall();
        	dom.remove();
        	e.preventDefault();
        });
        btn_ok.on('click', function (e) {
        	o.okCall();
        	dom.remove();
        	e.preventDefault();
        });

        dom.appendTo($('body'));
        return $dom;
    };
})(jQuery);


	function bg_click(){
		//关闭查词弹出层
		closeDialog();
		//隐藏速度层
		hideChangeSudu();
		if(playstate == 4){//查词点击背景不处理
					$("#div_words_bg").hide();
					$(".am-share").removeClass("am-modal-active");  
			            setTimeout(function(){
			                $(".sharebg-active").removeClass("sharebg-active"); 
			                $(".sharebg").remove(); 
			            },300);	

			            dismissRightMenu();
		}else if(playstate == 2){//复读模式，如果正在读，不停止

				if(isfuduing){
					$("#div_content_bg").show();
				}
					$("#div_words_bg").hide();
					$(".am-share").removeClass("am-modal-active");  
			            setTimeout(function(){
			                $(".sharebg-active").removeClass("sharebg-active"); 
			                $(".sharebg").remove(); 
			            },300);	

			            dismissRightMenu();
		}else{
				$("#div_words_bg").hide();
				$(".am-share").removeClass("am-modal-active");  
		            setTimeout(function(){
		                $(".sharebg-active").removeClass("sharebg-active"); 
		                $(".sharebg").remove(); 
		            },300);	

		            dismissRightMenu();


		            
		}
		
	}

	//获取本地图书数据的函数
	function getAndroidLocalData(){

	 $.ajax({
                type:'get',
                url:"getLocalBookData",
                dataType:'json',
                contentType:'application/x-www-form-urlencoded',
                async:true, //设置同步传输，默认是true。true:异步 false:同步
                beforeSend:function(){
                },
                success:function(data){
                   getParams(JSON.stringify(data));
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                            //alert(XMLHttpRequest.status);
                            //alert(XMLHttpRequest.readyState);
                        console.log('ajax请求接口失败');
                }
            });
	}

	var strArrData = "";
	//多次函数
	function getReParams(data){
		if(strArrData.indexOf(data) == -1){//不包含
			strArrData = strArrData + data;
			console.log("此次添加："+data);
		}
		console.log("已经添加："+strArrData);

	}

	//多次over函数
	function getOverParams(data){
		if(strArrData.indexOf(data) == -1){//不包含
			strArrData = strArrData + data;
			console.log("最后一次添加："+strArrData);
		}

		//开始调用真正的函数
		getParams(strArrData);
	}



//获取传递过来的book 信息
    function getParams(data){
    console.log("源数据："+data);
     // data需要转成json调用 ，函数urlParamParseJson();
         var jodata = JSON.parse(data); 
         if(isNotNull(jodata)){//开始初始化图书数据

             if(isNotNull(jodata.resource_path)){
                 rootpath = jodata.resource_path;
             }else{
                 alert("加载图书数据失败，请重新下载该图书");
                 return;
             }


             	if(isNotNull(jodata.book) && isNotNull(jodata.book.contents)){
             		var mulu = jodata.book.contents;
             		var strmenu = "";
             		for(var i = 0;i<mulu.length;i++){
             			var item = mulu[i];
             			if(isNotNull(item)){
             				strmenu = strmenu + '<li class="item-content" onclick="rightmenu_click(this)" curpage="'+item.PageNo+'"><div class="item-inner"><div class="item-title">'+item.Text+'</div><div class="item-after">'+item.PageNo+'页</div></div></li>'
             			}
             		}
             		$$("#right_menu_content").html(strmenu);
             	}


                 if(isNotNull(jodata.book) && isNotNull(jodata.book.pages)){
                    position_data = jodata.book.pages;
                 }
                 
                 var strcontent = '';
                 if(isNotNull(position_data) && position_data.length>0){
                 	loading_img_url = [];
                     for(var i = 0; i<position_data.length;i++){
                         var imgpath = rootpath+position_data[i].ImageName;
						loading_img_url.push(imgpath);
                         // strcontent = strcontent + '<div class="swiper-slide"><img src="'+imgpath+'" alt="" ></div>'

                     }

                     // $$(".swiper-wrapper").html(strcontent);

                         //默认是第一页

                 //初始化页面，开始加载显示页面
                 // initPage();

                 loading();

                 //动态创建btn
                createCheckImage(0);

                
                 }else{
                     alert("加载图书数据失败，请重新下载该图书");
                 }
         }
    }


   // 初始化区域
   $$(function () {
    // $.reinitSwiper(); 

    // $.getJSON('aa.json',function(data){
    // 	alert(data);
    //         });
   /* var strmenu = '<li class="item-content" onclick="rightmenu_click(this)" curpage="0"><div class="item-inner"><div class="item-title">封面</div><div class="item-after">1页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="1"><div class="item-inner"><div class="item-title">Contents</div><div class="item-after">2页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="2"><div class="item-inner"><div class="item-title">My Name</div><div class="item-after">3页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="3"><div class="item-inner"><div class="item-title">Unit One</div><div class="item-after">4页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="4"><div class="item-inner"><div class="item-title">My classroom</div><div class="item-after">5页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="5"><div class="item-inner"><div class="item-title">Let’s Talk And Play</div><div class="item-after">6页</div></div></li><li class="item-content" onclick="rightmenu_click(this)" curpage="6"><div class="item-inner"><div class="item-title">Let’s Learn And Do</div><div class="item-after">7页</div></div></li>';

    $$("#right_menu_content").html(strmenu);*/

    var sswidth = window.screen.width*0.8-30;

    $$('.single-slider').jRange({
    	from: 1,
    	to: 11,
    	step: 1,
    	scale: ['慢','中','快'],
    	format: '%s',
    	width: sswidth,
    	theme: 'theme-blue',
    	showLabels: false
    });
    
    $.init();

    // getParams(tempddd);



    getParams(tempddd)
});


var tempddd = '{\
    "subject": "",\
    "period": "",\
    "grade": "",\
    "resource_path": "../book8/",\
    "book": {\
    "pages": [{\
        "Rects": [{\
            "X": 0.92202626641651031,\
            "Y": 0.0040322580645161289,\
            "Width": 0.00375234521575985,\
            "Height": 0.0026881720430107529,\
            "Sound": null,\
            "SoundTime": 0.0,\
            "TSound": null,\
            "TSoundTime": 0.0,\
            "Content": null,\
            "Translate": null\
        }],\
        "Index": 0,\
        "ImageName": "c61efc55ee2622515c41c743082bb801"\
    }, {\
        "Rects": [ {\
            "X": 0.16197522679864609,\
            "Y": 0.26952141057934509,\
            "Width": 0.0052800791089420655,\
            "Height": 0.0,\
            "Sound": null,\
            "SoundTime": 0.0,\
            "TSound": null,\
            "TSoundTime": 0.0,\
            "Content": null,\
            "Translate": null\
        }],\
        "Index": 6,\
        "ImageName": "d97a3ea9aa50195e782bc2163138efaa"\
    }]\
}\
}';

</script>
</body>
</html>